<!DOCTYPE html>
<html lang="en">
<meta name="x-csrf-token" content="{{ csrf_token() }}">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/app.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/webuploader/0.1.1/Uploader.swf">
    <link rel="stylesheet" href="https://cdn.staticfile.org/webuploader/0.1.1/webuploader.css">
</head>
<body>
<div class="container">
    <div class="panel-heading">上传文件</div>
    <form class="form-horizontal" method="POST" action="{{url('/uploadImage')}}" enctype="multipart/form-data">
        {{ csrf_field() }}
        <label for="file">选择文件</label>
        <input id="file" type="file" multiple="multiple" class="form-control" name="source" required>
        <button type="submit" class="btn btn-primary">开始上传</button>
    </form>
</div>

<h1>webuploader</h1>
<form action="{{url('/uploadimg')}}" method="post" enctype="multipart/form-data">
        <div id="uploader-demo">
            <!--用来存放item-->
            <div id="fileList" class="uploader-list"></div>
            <div id="filePicker">选择图片</div>
            <div id="show_img" style="display:none;">
                <img id="thumb_img" src="" alt="图片" height="100px">
            </div>
            <button id="ctlBtn" class="btn btn-default">开始上传</button>
        </div>
</form>


<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/webuploader/0.1.0/webuploader.min.js"></script>
{{--<script>--}}
    {{--var $list = $("#fileList");   //这几个初始化全局的百度文档上没说明，好蛋疼--}}
    {{--var thumbnailWidth = 100;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档--}}
    {{--var thumbnailHeight = 100;--}}
    {{--var uploader = WebUploader.create({--}}
        {{--// 选完文件后，是否自动上传。--}}
        {{--auto: true,--}}
        {{--formData: {--}}
            {{--// 这里的token是外部生成的长期有效的，如果把token写死，是可以上传的。--}}
            {{--_token:'{{ csrf_token() }}'--}}
        {{--},--}}
        {{--// swf文件路径--}}
        {{--swf: 'http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf', //加载swf文件，路径一定要对--}}
        {{--// 文件接收服务端。--}}
        {{--server: '{{ url('upload/uploadimg') }}',--}}
        {{--// 选择文件的按钮。可选。--}}
        {{--// 内部根据当前运行是创建，可能是input元素，也可能是flash.--}}
        {{--pick: {--}}
            {{--id : '#filePicker',--}}
            {{--multiple : false--}}
        {{--},--}}
        {{--// 只允许选择图片文件。--}}
        {{--accept: {--}}
            {{--title: 'Images',--}}
            {{--extensions: 'gif,jpg,jpeg,bmp,png',--}}
            {{--mimeTypes: 'image/'--}}
        {{--}--}}
    {{--});--}}
    {{--// 文件上传过程中创建进度条实时显示。--}}
    {{--uploader.on( 'uploadProgress', function( file, percentage ) {--}}
        {{--var $li = $( '#'+file.id ),$percent = $li.find('.progress span');--}}

        {{--// 避免重复创建--}}
        {{--if ( !$percent.length ) {--}}
            {{--$percent = $('<p class="progress"><span></span></p>').appendTo( $li ).find('span');--}}
        {{--}--}}

        {{--$percent.css( 'width', percentage * 100 + '%' );--}}
    {{--});--}}

    {{--// 文件上传成功，给item添加成功class, 用样式标记上传成功。--}}
    {{--uploader.on( 'uploadSuccess', function(file,response) {--}}
        {{--var imgurl = response.url;--}}
        {{--$('#thumb_img').attr('src',imgurl);--}}

        {{--$('#show_img').css('display','block');--}}

        {{--$( '#'+file.id ).addClass('upload-state-done');--}}
    {{--});--}}

    {{--// 文件上传失败，显示上传出错。--}}
    {{--uploader.on( 'uploadError', function(file,response) {--}}
        {{--var fileerror = response.error;--}}

        {{--var $li = $( '#'+file.id ),$error = $li.find('div.error');--}}

        {{--// 避免重复创建--}}
        {{--if ( !$error.length ) {--}}
            {{--$error = $('<div class="error"></div>').appendTo( $li );--}}
        {{--}--}}

        {{--$error.text('上传失败'+fileerror);--}}
    {{--});--}}

    {{--// 完成上传完了，成功或者失败，先删除进度条。--}}
    {{--uploader.on( 'uploadComplete', function( file ) {--}}
        {{--$( '#'+file.id ).find('.progress').remove();--}}
    {{--});--}}
{{--</script>--}}
<script>
    // 初始化Web Uploader
    var $list = $("#fileList");   //这几个初始化全局的百度文档上没说明，好蛋疼
    var thumbnailWidth = 100;   //缩略图高度和宽度 （单位是像素），当宽高度是0~1的时候，是按照百分比计算，具体可以看api文档
    var thumbnailHeight = 100;
    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: true,

        // swf文件路径
        swf: '/Uploader.swf',

        // 文件接收服务端。
        server: 'http://192.168.1.104/uploadimg',


        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'jpg,jpeg,png',
            mimeTypes: 'image/jpg,image/jpeg,image/png'
        }
    });

    // 当有文件添加进来的时候
    uploader.on( 'fileQueued', function( file ) {
        var $li = $(
            '<div id="' + file.id + '" class="file-item thumbnail">' +
            '<img>' +
            '<div class="info">' + file.name + '</div>' +
            '</div>'
            ),
            $img = $li.find('img');


        // $list为容器jQuery实例
        $list.append( $li );

        // 创建缩略图
        // 如果为非图片文件，可以不用调用此方法。
        // thumbnailWidth x thumbnailHeight 为 100 x 100
        uploader.makeThumb( file, function( error, src ) {
            if ( error ) {
                $img.replaceWith('<span>不能预览</span>');
                return;
            }
            $img.attr( 'src', src );
        }, thumbnailWidth, thumbnailHeight );
        console.log($list)
    });
    // 文件上传过程中创建进度条实时显示。
    uploader.on( 'uploadProgress', function( file, percentage ) {
        var $li = $( '#'+file.id ),
            $percent = $li.find('.progress span');

        // 避免重复创建
        if ( !$percent.length ) {
            $percent = $('<p class="progress"><span></span></p>')
                .appendTo( $li )
                .find('span');
        }

        $percent.css( 'width', percentage * 100 + '%' );
    });

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on( 'uploadSuccess', function( file ) {
        $( '#'+file.id ).addClass('upload-state-done');
    });

    // 文件上传失败，显示上传出错。
    uploader.on( 'uploadError', function( file ) {
        var $li = $( '#'+file.id ),
            $error = $li.find('div.error');

        // 避免重复创建
        if ( !$error.length ) {
            $error = $('<div class="error"></div>').appendTo( $li );
        }

        $error.text('上传失败');
    });

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on( 'uploadComplete', function( file ) {
        $( '#'+file.id ).find('.progress').remove();
    });
</script>



</body>
</html>